<template>
  <a-modal
    v-model:visible="visible"
    draggable
    width="500px"
    @cancel="cancelMethod"
    @before-ok="handleBeforeOk"
  >
    <template #title>
      {{
        formData.id
          ? `${$t('columns.operations.edit')}`
          : `${$t('searchTable.operation.create')}`
      }}用户
    </template>
    <a-form
      ref="formRef"
      :label-col-props="{ span: 6 }"
      :model="formData"
      :wrapper-col-props="{ span: 18 }"
      class="form"
    >
      <div v-if="isNew">
        <a-form-item
          :rules="[
            { required: true, message: $t('person.error.name.required') },
          ]"
          field="name"
          label="名称"
        >
          <a-input
            v-model="formData.name"
            :placeholder="$t('person.placeholder.name')"
          />
        </a-form-item>
        <a-form-item
          :label="$t('person.phone')"
          :rules="[
            { required: true, message: $t('person.error.phone.required') },
          ]"
          field="phone"
        >
          <a-input
            v-model="formData.phone"
            :placeholder="$t('person.placeholder.phone')"
          />
        </a-form-item>
        <a-form-item
          :rules="[{ required: true, message: '请选择菜单' }]"
          field="menus"
          label="菜单"
        >
          <a-checkbox-group v-model="formData.menus" :options="menuOptions">
          </a-checkbox-group>
        </a-form-item>
        <!--        <a-form-item-->
        <!--          field="status"-->
        <!--          label="状态"-->
        <!--          :rules="[{ required: true, message: '请输入状态' }]"-->
        <!--        >-->
        <!--          <a-radio-group v-model="formData.status">-->
        <!--            <a-radio value="Normal">正常</a-radio>-->
        <!--            <a-radio value="Stop">停用</a-radio>-->
        <!--          </a-radio-group>-->
        <!--        </a-form-item>-->
        <!--        <a-form-item-->
        <!--          field="pwd"-->
        <!--          label="密码"-->
        <!--          :rules="[{ required: true, message: '请输入密码' }]"-->
        <!--        >-->
        <!--          <a-input v-model="formData.pwd" placeholder="请输入密码" />-->
        <!--        </a-form-item>-->
      </div>
      <div v-else>
        <a-form-item
          :rules="[{ required: true, message: '请选择菜单' }]"
          field="menuIds"
          label="菜单"
        >
          <a-checkbox-group v-model="formData.menuIds" :options="menuOptions">
          </a-checkbox-group>
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import {
    TUser,
    TUserDTO,
    useCreate,
    useDetail,
    useUpdateAuthMenus,
  } from '@/api/subsidy';
  import { useUserStore } from '@/store';

  defineProps({
    title: {
      type: String,
      default: '人员管理',
    },
  });
  const formRef = ref();
  const visible = ref(false);
  const isNew = ref(true);
  const menuOptions = ref([
    { label: '用户管理', value: 'm00' },
    { label: '费用类凭证规则', value: 'm01' },
    { label: '查看/推送凭证', value: 'm02' },
    { label: '辅助核算项配置', value: 'm03' },
    { label: '付款类凭证规则', value: 'm04' },
  ]);
  const userStore = useUserStore();
  const formData = ref<TUserDTO>({
    id: '',
    menuIds: [],
    name: '',
    pwd: '',
    phone: '',
  });
  const getUserMethod = async (id: string) => {
    const { data } = await useDetail(id);
    formData.value = data;
  };

  function handleChangeVisible(obj: TUser) {
    visible.value = !visible.value;
    if (obj) {
      isNew.value = false;
      getUserMethod(obj.id);
    } else {
      isNew.value = true;
      formData.value = { id: '', menuIds: [], name: '', phone: '' };
    }
  }

  const cancelMethod = () => {
    visible.value = false;
  };
  const emit = defineEmits(['refresh']);

  function handleBeforeOk(done: any) {
    formRef.value.validate((valid: any) => {
      if (valid) {
        done(false);
      } else if (formData.value.id && !isNew.value) {
        useUpdateAuthMenus({
          userId: formData.value.id,
          menuIds: formData.value.menuIds,
        })
          .then(() => {
            Message.success('操作成功');
            emit('refresh');
            done();
          })
          .catch(() => {
            done(false);
          });
      } else {
        useCreate(formData.value)
          .then(() => {
            Message.success('操作成功');
            emit('refresh');
            done();
          })
          .catch(() => {
            done(false);
          });
      }
    });
  }

  defineExpose({ handleChangeVisible });
</script>
